<?php
if($this->session->userdata('role') != null){
	if($this->session->userdata('role') == 1){
include 'include/header.php';
?>
<script>
function modal_preview(e){
				e.preventDefault();
				$('#ajaxModal').remove();
				var url = $(e.target).attr('href');
				$('<div class="modal" id="ajaxModal"><div class="modal-body"></div></div>').appendTo('body');
				 $('#ajaxModal').modal();
				 $('#ajaxModal').load(url);
				//console.log(url.toString());
}
</script>
<div style="background-color:#fff; margin-top:-15px; margin-left: 150px; margin-right: 150px; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1)">
	<div style="margin-left: 25px; margin-right: 25px; padding-top:15px; padding-bottom:15px">
		
		<h3>Form Pembuatan Kuesioner Penelitian</h3>
		<form  id="formK" method="post" action="<?php echo base_url().'index.php/kuesioner/tambah_kuesioner/simpan'?>" enctype="multipart/form-data" data-parsley-validate>
			<div class="form-group">
				<label>Nama Kuesioner</label>
				<input class="form-control" name="nama" data-parsley-trigger="change" required>
			</div>
			<div class="form-group">
				<label>Deskripsi</label>
				<input class="form-control" name="deskripsi" data-parsley-trigger="change" required>
			</div>
			<!--div class="form-group">
				<label>Identitas Responden</label>
				<button type="button" class="btn btn-default" onclick="tambah_id()">Tambah Identitas</button>
			<div id="identitas">
			<!--penambahan identitas responden muncul disini>
			</div>
				
			 </div-->
			<div class="form-group">
				<label>Pertanyaan</label>
						<div class="dropdown">
							<button class="btn btn-default dropdown-toggle" type="button" id="jenis_kues" data-toggle="dropdown">Tambah Pertanyaan<span class="caret"></span></button>
							<ul class="dropdown-menu" role="menu" aria-labelledby="jenis_kues">
								<!--li role="presentation"><a  role="menuitem" tabindex="-1" href="#" onclick="modal_kues_teks()">Teks</a></li-->
								<li role="presentation"><a  role="menuitem" tabindex="-1" href="#" onclick="tambah_id()">Identitas</a></li>
								<li role="presentation"><a  role="menuitem" tabindex="-1" href="#" onclick="tambah_pg()">Pilihan Ganda</a></li>
								<li role="presentation"><a  role="menuitem" tabindex="-1" href="#" onclick="modal_kues_skala()" id="menu_skala">Skala</a></li>
							</ul>
						</div>
						<div id="identitas">
						<br />
						<!--penambahan identitas responden muncul disini-->
						</div>
						<div id="pilihan_ganda">
						<br />
						<!--penambahan pilihan ganda muncul disini-->
						</div>
						<div id="kolom_pertanyaan">
						<br />
						<!-- penambahan pertanyaan-->
						</div>
				
			</div>
		<div class="form-group">
			<label>Upload Metodologi Penelitian</label>
				<input type="file" name="file" id="file" readonly="true" data-parsley-trigger="change" required>
		</div>
		<div class="form-group">
			<label>Keterangan</label>
			<input type="checkbox" name="pp" value="1">Publish Penelitian</input>
			<input type="checkbox" name="pm" value="1">Publish Metodologi</input>
			<input type="checkbox" name="pd" value="1">Publish Data</input>
		</div>
		<div class="form-group">
		  <button type="submit" class="btn btn-primary">Save</button>
		  <input type="button" class="btn btn-danger" value="Cancel" onclick="window.history.back()">
		  <!--input type="button" class="btn btn-warning" value="Preview" onclick="modal_preview(event)" href="<?php //echo site_url('kuesioner/tambah_kuesioner/preview');?>"-->
		</div>
	<div id="modal_skala" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">Pertanyaan skala</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<!--input id="jumlah_skala" class="form-control" placeholder="Jumlah skala"-->
						<select id="jumlah_skala" class="btn btn-default" style="width:100%" >
							<option value=0>-- Pilih Skala--</option>
							<option value=3>3</option>
							<option value=5>5</option>
							<option value=7>7</option>
						</select>
					</div>
					<div class="form-group">
						<div id="kolom_skala">
						</div>
					</div>
					<div class="form-group">
						<input id="jumlah_perta_skala" type="number" class="form-control" placeholder="Masukkan jumlah pertanyaan" disabled>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button id="btn_tambah" type="button" class="btn btn-primary" onclick="tambah_kues_skala()" disabled>Tambah</button>
				</div>
			</div>
		</div>
	</div>
		</form>
		<div id="modal_pg" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">Pilihan Ganda</h4>
				</div>
				<div class="modal-body">
					<div class="form-group">
						<input id="jumlah_pg" type="number" class="form-control" placeholder="Masukkan jumlah pilihan">
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button id="btn_tambah_pg" type="button" class="btn btn-primary" onclick="tambah_kues_pg()" disabled>Tambah</button>
				</div>
			</div>
		</div>
	</div>
		<!--div id="modal_kues_teks" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
		  <div class="modal-dialog modal-sm">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title" id="myModalLabel">Masukkan pertanyaan</h4>
				</div>
				<div class="modal-body">
					<input id="pertanyaan" class="form-control" placeholder="Pertanyaan">
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<button type="button" class="btn btn-primary" onclick="tambah_kues_teks()">Tambah</button>
				</div>
			</div>
		  </div>
		</div-->
	</div>
</div>
<script>

var ident_number = 0;
var kues_teks_number = 0;
var kues_skala_number = 0;
var kues_pg_number = 0;


$(document).ready(function() {
	
	$('#jumlah_skala').change(function(){
			if($(this).val() != 0){
				$('#jumlah_perta_skala').removeAttr('disabled');
			} else{
				$('#jumlah_perta_skala').attr('disabled', 'disabled');
				$('#jumlah_perta_skala').val('');
				$('#btn_tambah').attr('disabled', 'disabled');
				}
		});
		
	$('#jumlah_perta_skala').keyup(function(){
			if($(this).val() == ''){
				$('#btn_tambah').attr('disabled', 'disabled');
			} else {
				$('#btn_tambah').removeAttr('disabled');
			}
		});
		
	$('#jumlah_pg').keyup(function(){
			if($(this).val() == ''){
				$('#btn_tambah_pg').attr('disabled', 'disabled');
			} else {
				$('#btn_tambah_pg').removeAttr('disabled');
			}
		});
		
	$('#file').on( 'change', function() {
	   myfile= $( this ).val();
	   var ext = myfile.split('.').pop();
	   if(ext=="pdf"){
		   
	   } else{
			alert('format file harus pdf!');
			$('#file').val('');
	   }
	});
	
	$('#btn_tambah').click(function(){
		$('#menu_skala').parent().addClass('disabled');
		$('#menu_skala').attr('onclick','').unbind('click');
	});
	
	$("#formK").on('submit', function(e){
		if(!$('#identitas').children('.row').length > 0 && !$('#pilihan_ganda').children('.row').length > 0 && !$('#kolom_pertanyaan').children('.row').length > 0)
		{
			alert('Pertanyaan belum ditambah!');
			event.preventDefault();
			return false;
		}
	});
})
	function tambah_id(){
			ident_number++;
			var identitas = '<div id="row_ident-'+ident_number+'" class="row">';
			identitas += '<div class="col-lg-4">';
			identitas += '<div class="input-group">';
			//identitas += '<span class="input-group-btn">'+ident_number+'. </span>';
			identitas += '<div class="input-group-btn"><select style="height: 34px;" id="jenis_ident" name="jenis_ident[]" title="pilih jenis identitas"><option value="0">Teks</a></option><option  value="1">Tanggal</option><option value="2">Email</option></select></div>';
			identitas += '<input name="jns_kues[]" value="1" style="display:none">';
			identitas += '<input type="text" class="form-control" id="add_ident-'+ident_number+'" name="kues[]" data-parsley-trigger="change" required>';
			identitas += '<span class="input-group-btn"><button type="button" class="btn btn-default" onclick="delete_ident('+ident_number+')">X</button></span>';
			identitas += '</div>';
			identitas += '</div>';
			identitas += '</div>';
			$('#identitas').append(identitas);
			}
	
	function delete_ident(id) {
		$('#row_ident-'+id).remove();
	}
	
	function tambah_pg()
	{
		$('#modal_pg').modal('show');
	}
	
	function tambah_kues_pg()
	{	var jml = $('#jumlah_pg').val();
		var b = parseInt(jml);
		var c;
		if(b < 5){
			c = 0;
		} else{
			c = (b/5).toFixed();
			}
		var d = b%5;
		var a = 1;
		
		kues_pg_number++;
		var html = '<div class="row" id="kues_pg-'+kues_pg_number+'">';
			html +='<div><button type="button" class="btn btn-default" onclick="delete_pg('+kues_pg_number+')"  title="Hapus pertanyaan pilihan ganda!" style="margin-left: 960px; padding-bottom: 5px;">X</button></div>';
			html += '<div class="col-lg-4">';
			html += '<div class="input-group-btn">';
			html += '<input class="form-control" name="jns_kues[]" value="2" style="display:none">';
			html += '<input class="form-control" placeholder="masukkan pertanyaan" name="kues[]" data-parsley-trigger="change" required>';
			html += '</div>';
			html += '</div>';
			
			for(var j = 0; j < c; j++){
			html += '<div class="row" style="margin-left: 370px; width: 1176">';
				for(var i=0; i < 5; i++) {
					html += '<div class="col-lg-2">';
					html += '<input class="form-control" style="border-style:ridge;" name="pg[]" placeholder="pilihan '+a+'" style="margin-lelft:-15px; width:94px" data-parsley-trigger="change" required>';
					html += '</div>';
					a++;
				}
			html += '</div>';
			}
			
			html += '<div class="row" style="margin-left: 370px; width: 1176">';
			for(var k = 0; k < d; k++){
					html += '<div class="col-lg-2">';
					html += '<input class="form-control" style="border-style:ridge;" name="pg[]" placeholder="pilihan '+a+'" style="margin-lelft:-15px; width:94px" data-parsley-trigger="change" required>';
					html += '</div>';
				a++;
			}
			html += '</div>';
			
			html += '</div>';
			
		
		$('#pilihan_ganda').append(html);
		$('#modal_pg').modal('hide');
			
	}
	
	function delete_pg(id)
	{
		$('#kues_pg-'+id).remove();
	}
	
	
	function tambah_kategori(){
		for ( var i = 1; i <= $('#jumlah_kategori').val(); i++) {
		var kategori = '<div id="kategori-'+i+'" style="border: 1px solid #D1D1D1; margin-left: 25px">';
		kategori += '<div class="dropdown">';
		kategori += '<label>Kategori '+i+'</label><br />';
		kategori += '<button class="btn btn-default dropdown-toggle" type="button" id="jenis_kues" data-toggle="dropdown">Tambah Pertanyaan<span class="caret"></span></button>';
		kategori += '<ul class="dropdown-menu" role="menu" aria-labelledby="jenis_kues">';
		kategori += '<li role="presentation"><a id="teks'+i+'" role="menuitem" tabindex="-1" href="#" onclick="modal_kues_teks('+i+')">Teks</a></li>';
		kategori += '<li role="presentation"><a id="skala'+i+'" role="menuitem" tabindex="-1" href="#" onclick="tambah_kues_skala('+i+')">Skala</a></li>';
		kategori += '</ul>';
		kategori += '</div>';
		kategori += '<div id="kues_teks'+i+'"></div>';
		kategori += '</div><br />';
		$('#kategori_kues').append(kategori);
		}
		$('#tambah_kategori').hide();
	}
	
	function modal_kues_teks(){
		$('#modal_kues_teks').modal('show');
	}
	
	function tambah_kues_teks(){
		kues_teks_number++;
		$('#modal_kues_teks').modal('hide');
		var b = $('#pertanyaan').val();
		var teks = '<div id="teks-'+kues_teks_number+'" class="input-group" style="background-color: antiquewhite;padding-bottom: 5px;">';
		teks += '<select id="select_jenis_ident" name="jenis_ident"><option value="1">Perencanaan</a></option><option  value="2">Pelaksanaan</option><option  value="3">Pengawasan</option></select>';
		teks += '<input class="form-control" name="jns_kues[]" value="1" style="display:none">';
		teks += '<input class="form-control" placeholder="Pertanyaan" name="kues[]" readonly value="'+b+'">';
		teks += '<div class="input-group-btn">';
		teks += '<button type="button" class="btn btn-default" onclick="delete_teks('+kues_teks_number+')">X</button>';
		teks += '</div>';
		teks += '</div>';
		$('#kolom_pertanyaan').append(teks);
	}
			
	function delete_teks(id){
		$('#teks-'+id).remove();
	}
	
	function modal_kues_skala(){
		$('#modal_skala').modal('show');
	}
	
	
	function tambah_kues_skala(){
		kues_teks_number++;
		var b = $('#jumlah_perta_skala').val();
		var c = $('#jumlah_skala').val();
		
		var html = '<div id="kol_kuesskala'+kues_teks_number+'" style="background-color: aliceblue" class="row">';
		html +='<div><button type="button" class="btn btn-default" onclick="delete_skala('+kues_teks_number+')" style="margin-left: 960px; padding-bottom: 5px;" title="Hapus pertanyaan skala!">X</button><button type="button" onclick="nambah_skala()" style="margin-left:858px">tambah pertanyaan</button></div>';

		html += '<div style="margin-left: 311px;width: 1176px;">';
		for(var i=0; i < c; i++) {
			var a = i+1;
			html += '<div class="col-lg-1"  >';
			html += '<input class="form-control" style="border-style:ridge;" type="text" name="skala[]" placeholder="skala'+a+'" style="margin-left:-15px; width:94px" data-parsley-trigger="change" required>';
			html += '</div>';
		}
		html += '</div>';
		html += '<div class="row"></div>';
		
		for( var i = 1; i <= b; i++){
			html += '<div class="row">';
			html += '<div class="col-lg-4">';
			html += '<div class="input-group-btn">';
			html += '<input class="form-control" name="jns_kues[]" value="3" style="display:none">';
			html += '<input class="form-control" placeholder="masukkan pertanyaan" name="kues[]" data-parsley-trigger="change" required>';
			html += '</div>';
			html += '</div>';
			html += '</div>';
		}
			
			html += '<div id="skala_tambahan" style="background-color: aliceblue"></div>';
			
		html += '</div>';
		$('#modal_skala').modal('hide');
		$('#kolom_pertanyaan').append(html);
	}
	
	function delete_skala(id){
		$('#kol_kuesskala'+id).remove();
		$('#menu_skala').parent().removeClass('disabled');
		$('#menu_skala').attr('onclick','modal_kues_skala()')
	}
	
	var no_tambahan = 1;
	function nambah_skala()
	{	
		
		var html = '<div class="row">';
		html += '<div class="col-lg-4">';
		html += '<div class="input-group-btn">';
		html += '<input class="form-control" name="jns_kues[]" value="2" style="display:none">';
		html += '<input class="form-control" placeholder="masukkan pertanyaan" name="kues[]" data-parsley-trigger="change" required>';
		html += '</div>';
		html += '</div>';
		html += '</div>';
		$('#skala_tambahan').append(html);
	}
	
	function post(e){
		if($('#identitas').not(':has(.row)') && $('#pilihan_ganda').not(':has(.row)') && $('#kolom_pertanyaan').not(':has(.row)'))
		{
			alert('Pertanyaan belum ditambah!');
			event.preventDefault();
			return false;
		}
	}
	

</script>
<?php
include 'include/footer.php';
} else{ 
		echo 'Anda belum login, silahkan login terlebih dahulu dengan klik link berikut';
		echo '<a href="'.base_url('index.php/guest').'">Kembali</a>';
	}
} else
	{
		echo 'Anda belum login, silahkan login terlebih dahulu dengan klik link berikut';
		echo '<a href="'.base_url('index.php/guest').'">Kembali</a>';
	}
	
?>